<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <!-- 首页 -->
    <div class="body" style="display: block;">
        <!-- 头部 -->
        <div class="head dispfx flxhc flxvc">
            <p>奈商城</p>
        </div>
        <!-- 1 -->
        <div class="one dispfx flxvc flxspb">
            <embed src="./image/放大镜.svg" type="">
            <input type="text" placeholder="输入您要搜索的宝贝..">
            <div class="one-1">
                <img src="./image/home-msg.png" alt="">
                <span></span>
            </div>
        </div>
        <!-- 2  轮播图  -->
        <section>
            <div class="lb">
                <div class="lunbo">
                    <ul class="dispfx">
                        <li><img src="./image/banner2.jpg" alt=""></li>
                        <li><img src="./image/banner2.jpg" alt=""></li>
                        <li><img src="./image/banner2.jpg" alt=""></li>
                    </ul>
                </div>
                <div class="dian">
                    <ul class="yuan dispfx flx-hc">
                        <li class="on"></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- 3 -->
        <div class="three ">
            <ul class="three-ul dispfx flxvc flxar">
                <li>
                    <img src="./image/home-cat1.png" alt="" style="width: 0.64rem; height: 0.76rem;">
                    <p>菲茨</p>
                </li>
                <li>
                    <img src="./image/home-cat2.png" alt="" style="width: 0.25rem; height: 0.75rem;">
                    <p>克奈圃</p>
                </li>
                <li>
                    <img src="./image/home-cat3.png" alt="" style="width: 0.76rem; height: 0.77rem;">
                    <p>服装</p>
                </li>
                <li>
                    <img src="./image/home-cat4.png" alt=""
                        style="margin-top: .1033rem; width: 0.57rem; height: 0.61rem; ">
                    <p style="padding-top: 0.1007rem;">其它</p>
                </li>
            </ul>
        </div>
        <!-- 4 -->
        <div class="four dispfx flxvc flxhc">
            <span class="four-yuan1"></span>
            <span class="four-yuan2"></span>
            <span class="four-tu"></span>
            <span class="four-zi">精选推荐</span>
            <span class="four-tu"></span>
        </div>
        <!-- 5 -->
        <div class="five dispfx flxspb">
            <img src="./image/home-new.png" alt="" class="five-tu1">
            <img src="./image/home-promotion.png" alt="" class="five-tu2">
            <span class="five-xian1"></span>
            <span class="five-xian2"></span>
            <div class="five-1">
                <img src="./image/1-home_02.png" alt="">
                <p style="font-size: 0.32rem; margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白洗面奶</p>
                <p><span class="five-1-1">￥169</span><span class="five-1-2">￥220</span></p>
            </div>
            <div class="five-2">
                <img src="./image/1-home_03.png" alt="">
                <p style="font-size: 0.32rem;  margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白嫩肤霜</p>
                <p><span class="five-2-1">￥189</span><span class="five-2-2">￥220</span></p>
            </div>
        </div>
        <div class="five dispfx flxspb">
            <img src="./image/home-new.png" alt="" class="five-tu1">
            <img src="./image/home-promotion.png" alt="" class="five-tu2">
            <span class="five-xian1"></span>
            <span class="five-xian2"></span>
            <div class="five-1">
                <img src="./image/1-home_02.png" alt="">
                <p style="font-size: 0.32rem; margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白洗面奶</p>
                <p><span class="five-1-1">￥169</span><span class="five-1-2">￥220</span></p>
            </div>
            <div class="five-2">
                <img src="./image/1-home_03.png" alt="">
                <p style="font-size: 0.32rem;  margin-top: .2667rem; margin-bottom: .10rem;">莫次有机PWE活性美白嫩肤霜</p>
                <p><span class="five-2-1">￥189</span><span class="five-2-2">￥220</span></p>
            </div>
        </div>
        <!-- 底部 -->
        <div class="dibu">
            <ul class="dibu-ul dispfx flxvc flxar" id="dibu-ul">
                <li class="home">
                    <img src="./image/首页-选中.svg" type="" style="width: 0.61rem; height: 0.61rem;">
                    <p>首页</p>
                </li>
                <li class="shopping">
                    <img src="./image/购物车.svg" type="" style="width: 0.6rem; height: 0.56rem;">
                    <p>购物车</p>
                </li>
                <li class="my">
                    <img src="./image/我的.svg" type="" style="width: 0.59rem; height: 0.59rem;">
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>
    <!-- 搜索 -->
    <div class="search" style="display: none;">
        <!-- 头部 -->
        <div class="shead dispfx flxhc flxvc">
            <embed src="./image/返回.svg" type="">
            <p>奈商城</p>
        </div>
        <!-- 1 -->
        <div class="sone dispfx flxvc flxspb">
            <embed src="./image/放大镜.svg" type="">
            <input type="text" placeholder="输入您要搜索的宝贝..">
            <div class="one-1">
                取消
            </div>
        </div>
        <!-- 2 -->
        <div class="sthree">
            <ul class="sthree-ul">
                <li>
                    <p>全部商品</p>
                    <p><embed src="./image/右箭头.svg" type=""></p>
                </li>
                <li>
                    <p>菲茨</p>
                    <p><embed src="./image/右箭头.svg" type=""></p>
                </li>
                <li>
                    <p>克奈圃</p>
                    <p><embed src="./image/右箭头.svg" type=""></p>
                </li>
                <li>
                    <p>服装</p>
                    <p><embed src="./image/右箭头.svg" type=""></p>
                </li>
                <li>
                    <p>其它</p>
                    <p><embed src="./image/右箭头.svg" type=""></p>
                </li>
            </ul>
        </div>
    </div>
</body>
<!-- 轮播图 -->
<script>
    var bs = BetterScroll.createBScroll(".lunbo", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: true,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.dian li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
</script>
<!-- 底部交互 -->
<script>
    $('.dibu').click(function (e) {
        var newthis = e.target.parentNode.className
        if (newthis == 'dibu') {
            return
        }
        $('.my img').attr('src', './image/我的.svg')
        $('.my p').css('color', '#5D616A')
        $('.shopping img').attr('src', './image/购物车.svg')
        $('.shopping p').css('color', '#5D616A')
        $('.home img').attr('src', './image/首页.svg')
        $('.home p').css('color', '#5D616A')
        switch (newthis) {
            case 'home':
                $('.home img').attr('src', './image/首页-选中.svg')
                $('.home p').css('color', '#45B5ED')
                break;
            case 'shopping':
                $('.shopping img').attr('src', './image/购物车-选中.svg')
                $('.shopping p').css('color', '#45B5ED')
                break;
            case 'my':
                $('.my img').attr('src', './image/我的-选中.svg')
                $('.my p').css('color', '#45B5ED')
                break;
        }
    })
</script>
<!-- 搜索框 -->
<script>
    $('.one input').click(function () {
        $('.search').css('display', 'block')
        $('.body').css('display', 'none')
    })
    $('.sone .one-1').click(function () {
        $('.search').css('display', 'none')
        $('.body').css('display', 'block')
    })
</script>




</html>